import style from "../assets/css/reading.module.scss";
import { useEffect, useState, useRef } from "react";
import { useHistory } from "react-router-dom";
import { Swiper, InfiniteScroll, Loading } from "antd-mobile/2x";
import { getAllBook, getwriteBook } from "../axios/api";

const Reading = () => {
  const [book, setBook] = useState([]);
  const history = useHistory();
  const [wirter, setWirter] = useState("");
  const bdy = useRef();
  const inp = useRef();

  // useEffect(async () => {
  //   // const book_ = await axios.post("http://localhost:3007/api/getAllBook", {
  //   //   wirter
  //   // });

  //   // setBook(book_.data.data);

  //   const book_ = await getAllBook(wirter);

  //   setBook(book_.data.data);
  //   //
  // }, [wirter]);

  const InfiniteScrollContent = (hasMore) => {
    return (
      <>
        {hasMore.hasMore ? (
          <>
            <span>Loading</span>
            <Loading />
          </>
        ) : (
          <span>--- 我是有底线的 ---</span>
        )}
      </>
    );
  };

  const [page, changePage] = useState(0);
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  useEffect(async () => {
    // const book_ = await axios.post("http://localhost:3007/api/getAllBook", {
    //   wirter
    // });

    // setBook(book_.data.data);

    const book_ = await getwriteBook(wirter);
     
     setBook(book_.data.data);

     inp.current.onblur=()=>{
       console.log(2);
     }

    //  if (inp.current.value.length===1) {
    //   const book_ = await getAllBook();
    //   setBook(book_.data.data);
    //  }
   


   
    
    
  }, [wirter]);

  async function loadMore() {
    changePage((val) => val + 1);
  
    if (wirter) {
      setHasMore(false);
      return;
    }
  
    let book_ = await getAllBook();
    console.log(book_, "68");
    // console.log(book_.data.data );
    setBook((val) => [...val, ...book_.data.data]);
    setHasMore(book_.data.data.length > 0);

  }

  return (
    <div className={style.main}>
      <div className={style.title}>
        <i className={"iconfont icon-search"}> </i>
        <input
          ref={inp}
          placeholder="输入你要查找的作者"
          value={wirter}
          onChange={async()=>{ 
                   const book_ = await getAllBook();
                   setBook(book_.data.data);
           }}
          onInput={(e) => {
            setWirter(e.target.value);
          }}
        />

        <p>书城</p>
      </div>

      <div className={style.bdy} ref={bdy}>
        {/* 横向滑动 */}
        <div className={style.frist}>
          <div className={style.head}>
            <p>分类</p>
            <p>书单</p>
            <p>免费</p>
            <p>男生小说</p>
          </div>

          <div className={style.wiper}>
            <Swiper>
              <Swiper.Item>
                <div className="hbanner" className={style.haha}>
                  <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/812/855812/t6_855812.jpg" />
                  <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/891/41855891/t6_41855891.jpg" />
                </div>
              </Swiper.Item>
              <Swiper.Item>
                <div className="hbanner" className={style.haha}>
                  <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/891/41855891/t6_41855891.jpg" />
                  <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/836/39940836/t6_39940836.jpg" />
                  <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/891/41855891/t6_41855891.jpg" />
                </div>
              </Swiper.Item>
              <Swiper.Item>
                <div className="hbanner" className={style.haha}>
                  <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/891/41855891/t6_41855891.jpg" />
                  <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/836/39940836/t6_39940836.jpg" />
                  <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/812/855812/t6_855812.jpg" />
                </div>
              </Swiper.Item>
            </Swiper>
          </div>

          <div className={style.bot}>
            {/* 渲染数据 */}
            {book.map((item, id) => (
              <div key={id}>
                <div className={style.img}>
                  <img src={item.cover} />
                </div>
                <p>{item.name}</p>
              </div>
            ))}
          </div>
        </div>

        {/* 下拉 */}

        <div className={style.box}>
          {book.map((item, id) => (
            <div key={id} className={style.aaa}>
              <div>
                <h2>{item.name}</h2>
                <p className={style.one}>{item.wirter}</p>
                <p>{item.dec}</p>
                <img src={item.cover} />
                <div>立即阅读</div>
              </div>
            </div>
          ))}
        </div>

        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
          <InfiniteScrollContent hasMore={hasMore} />
        </InfiniteScroll>

        <p
          onClick={() => {
            bdy.current.scrollTo({ top: 0, behavior: "smooth" });
          }}
        >
          <i className="iconfont  icon-huidingbu"></i>
        </p>
      </div>

      <div className={style.button}>
        <div>
          <i className="iconfont icon-yuedu"></i>
          <p>阅读</p>
        </div>
        <div>
          <i className="iconfont icon-shujia"></i>
          <p>书架</p>
        </div>
        <div>
          <i className="iconfont icon-faxian"></i>
          <p
            onClick={() => {
              history.push("/kind");
            }}
          >
            分类
          </p>
        </div>
        <div>
          <i className="iconfont icon-wode"></i>
          <p>我的</p>
        </div>
      </div>
    </div>
  );
};

export default Reading;
